<!DOCTYPE html>
<html>
<head>
<title>Electron in Magnetic Field</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="650" height="450"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Clear canvas with a white background
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Helper function to draw an arrow
  function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);
    ctx.beginPath();
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.stroke(); // Draw the line segment
    ctx.beginPath(); // Start a new path for the arrowhead
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
  }

  // --- Define parameters ---
  const fieldX = 290;
  const fieldY = 50;
  const fieldWidth = 330;
  const fieldHeight = 300;

  const entryPoint = { x: fieldX, y: 200 };
  const angleDeg = 30;
  const angleRad = angleDeg * Math.PI / 180;

  const electronStartX = 100;
  const electronStartY = entryPoint.y + (entryPoint.x - electronStartX) * Math.tan(angleRad);

  // --- Draw the magnetic field region ---
  ctx.fillStyle = '#E0E0E0';
  ctx.fillRect(fieldX, fieldY, fieldWidth, fieldHeight);
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 1;
  // ctx.strokeRect(fieldX, fieldY, fieldWidth, fieldHeight); // No border in original

  // --- Draw the magnetic field lines ---
  ctx.lineWidth = 1.5;
  const fieldLinesY = [125, 200, 275];
  fieldLinesY.forEach(y => {
    drawArrow(ctx, fieldX + 10, y, fieldX + 280, y, 12);
  });

  // --- Draw the electron and its velocity vector ---
  // Electron (dot)
  ctx.beginPath();
  ctx.arc(electronStartX, electronStartY, 5, 0, 2 * Math.PI);
  ctx.fillStyle = 'black';
  ctx.fill();

  // Velocity vector
  ctx.lineWidth = 2;
  drawArrow(ctx, electronStartX, electronStartY, entryPoint.x, entryPoint.y, 12);

  // --- Draw the angle indication ---
  ctx.lineWidth = 1;
  const dashLength = 70;

  // Set line style to dashed
  ctx.setLineDash([5, 5]);

  // Dashed horizontal line
  ctx.beginPath();
  ctx.moveTo(entryPoint.x - dashLength, entryPoint.y);
  ctx.lineTo(entryPoint.x, entryPoint.y);
  ctx.stroke();

  // Dashed line along the path's angle
  const angleDashEnd = {
    x: entryPoint.x - dashLength * Math.cos(angleRad),
    y: entryPoint.y + dashLength * Math.sin(angleRad)
  };
  ctx.beginPath();
  ctx.moveTo(entryPoint.x, entryPoint.y);
  ctx.lineTo(angleDashEnd.x, angleDashEnd.y);
  ctx.stroke();

  // Draw the angle arc (solid line)
  ctx.setLineDash([]);
  ctx.beginPath();
  const arcRadius = 40;
  ctx.arc(entryPoint.x, entryPoint.y, arcRadius, -angleRad, 0);
  ctx.stroke();

  // --- Add all text labels ---
  ctx.fillStyle = 'black';
  ctx.textAlign = 'left';
  ctx.font = '18px Arial';

  // Angle label
  ctx.fillText('30°', entryPoint.x - 65, entryPoint.y + 22);

  // Electron labels
  ctx.textAlign = 'center';
  ctx.fillText('electron', electronStartX, electronStartY + 30);
  ctx.font = '17px Arial';
  // Using Unicode characters for superscripts for a cleaner look
  ctx.fillText('speed 3.4 × 10⁷ ms⁻¹', electronStartX + 10, electronStartY + 50);

  // Magnetic field labels
  ctx.textAlign = 'left';
  ctx.font = '18px Arial';
  const labelX = 450;
  const labelY = 80;
  ctx.fillText('region of uniform', labelX, labelY);
  ctx.fillText('magnetic flux', labelX, labelY + 25);
  ctx.fillText('density 3.2 mT', labelX, labelY + 50);

  // Pointer line from label to field
  ctx.beginPath();
  ctx.moveTo(labelX - 15, labelY + 25);
  ctx.lineTo(fieldX + 220, 125);
  ctx.lineWidth = 1;
  ctx.stroke();

  // Figure caption
  ctx.font = '18px Arial';
  ctx.textAlign = 'center';
  ctx.fillText('Fig. 8.1', canvas.width / 2, canvas.height - 20);

</script>
</body>
</html>